<template>
  <div class="taobaowang">
    <el-container>
      <el-main>
        <el-row :gutter="10">
          <el-col :span="12">
            <div class="box">
              <h2>
                <img
                  :src="res.meirihaodian.pic"
                  :alt="res.meirihaodian.title"
                /><small>{{ res.meirihaodian.text }}</small>
              </h2>
              <el-row :gutter="10">
                <el-col :span="12">
                  <h3>万能集市</h3>
                  <el-row :gutter="2">
                    <el-col :span="16">
                      <a href="">
                        <img
                          class="pic"
                          src="../assets/taobaowang/1.webp"
                          alt=""
                        />
                      </a>
                    </el-col>
                    <el-col :span="8">
                      <a href="">
                        <img
                          class="pic2 pic2-1"
                          src="../assets/taobaowang/2.webp"
                          alt=""
                        />
                      </a>
                      <a href="">
                        <img
                          class="pic2"
                          src="../assets/taobaowang/3.webp"
                          alt=""
                        />
                      </a>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <h3>淘宝江湖</h3>
                  <el-row :gutter="2">
                    <el-col :span="16">
                      <a href="">
                        <img
                          class="pic"
                          src="../assets/taobaowang/4.webp"
                          alt=""
                        />
                      </a>
                    </el-col>
                    <el-col :span="8">
                      <a href="">
                        <img
                          class="pic2 pic2-1"
                          src="../assets/taobaowang/5.webp"
                          alt=""
                        />
                      </a>
                      <a href="">
                        <img
                          class="pic2"
                          src="../assets/taobaowang/6.webp"
                          alt=""
                        />
                      </a>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <h3>深藏不露</h3>
                  <el-row :gutter="2">
                    <el-col :span="16">
                      <a href="">
                        <img
                          class="pic"
                          src="../assets/taobaowang/7.webp"
                          alt=""
                        />
                      </a>
                    </el-col>
                    <el-col :span="8">
                      <a href="">
                        <img
                          class="pic2 pic2-1"
                          src="../assets/taobaowang/8.webp"
                          alt=""
                        />
                      </a>
                      <a href="">
                        <img
                          class="pic2"
                          src="../assets/taobaowang/9.webp"
                          alt=""
                        />
                      </a>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <h3>高手林立</h3>
                  <el-row :gutter="2">
                    <el-col :span="16">
                      <a href="">
                        <img
                          class="pic"
                          src="../assets/taobaowang/10.webp"
                          alt=""
                        />
                      </a>
                    </el-col>
                    <el-col :span="8">
                      <a href="">
                        <img
                          class="pic2 pic2-1"
                          src="../assets/taobaowang/11.webp"
                          alt=""
                        />
                      </a>
                      <a href="">
                        <img
                          class="pic2"
                          src="../assets/taobaowang/12.webp"
                          alt=""
                        />
                      </a>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="box">
              <h2>
                <img
                  src="../assets/taobaowang/taobaozhibo.png"
                  alt="淘宝直播"
                />
                <small>你的爱豆直播等你哟！</small>
              </h2>
              <el-row :gutter="10">
                <el-col :span="12">
                  <h3>aj1黑脚趾 <small>6193观看</small></h3>
                  <el-row :gutter="2">
                    <el-col :span="16">
                      <a href="">
                        <img
                          class="pic"
                          src="../assets/taobaowang/13.webp"
                          alt=""
                        />
                        <span class="text">aj潮鞋半价</span>
                      </a>
                    </el-col>
                    <el-col :span="8">
                      <a href="">
                        <img
                          class="pic2 pic2-1"
                          src="../assets/taobaowang/14.webp"
                          alt=""
                        />
                      </a>
                      <a href="">
                        <img
                          class="pic2"
                          src="../assets/taobaowang/15.webp"
                          alt=""
                        />
                      </a>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <h3>泰盛直播 <small>812观看</small></h3>
                  <el-row :gutter="2">
                    <el-col :span="16">
                      <a href="">
                        <img
                          class="pic"
                          src="../assets/taobaowang/16.webp"
                          alt=""
                        />
                        <span class="text">夏秋装新款</span>
                      </a>
                    </el-col>
                    <el-col :span="8">
                      <a href="">
                        <img
                          class="pic2 pic2-1"
                          src="../assets/taobaowang/17.webp"
                          alt=""
                        />
                      </a>
                      <a href="">
                        <img
                          class="pic2"
                          src="../assets/taobaowang/18.webp"
                          alt=""
                        />
                      </a>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <h3>品牌折扣 <small>4200观看</small></h3>
                  <el-row :gutter="2">
                    <el-col :span="16">
                      <a href="">
                        <img
                          class="pic"
                          src="../assets/taobaowang/19.webp"
                          alt=""
                        />
                        <span class="text">品牌冬装大件</span>
                      </a>
                    </el-col>
                    <el-col :span="8">
                      <a href="">
                        <img
                          class="pic2 pic2-1"
                          src="../assets/taobaowang/20.webp"
                          alt=""
                        />
                      </a>
                      <a href="">
                        <img
                          class="pic2"
                          src="../assets/taobaowang/21.webp"
                          alt=""
                        />
                      </a>
                    </el-col>
                  </el-row>
                </el-col>
                <el-col :span="12">
                  <h3>wujunga <small>508观看</small></h3>
                  <el-row :gutter="2">
                    <el-col :span="16">
                      <a href="">
                        <img
                          class="pic"
                          src="../assets/taobaowang/22.webp"
                          alt=""
                        />
                        <span class="text">潮鞋品鉴</span>
                      </a>
                    </el-col>
                    <el-col :span="8">
                      <a href="">
                        <img
                          class="pic2 pic2-1"
                          src="../assets/taobaowang/23.webp"
                          alt=""
                        />
                      </a>
                      <a href="">
                        <img
                          class="pic2"
                          src="../assets/taobaowang/24.webp"
                          alt=""
                        />
                      </a>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>



<script>
    let dataSourse = {
        "meirihaodian": {
            "pic": require("../assets/taobaowang/meirihaodian.png"),
            "title": "每日好店",
            "text": "发现深藏的好店",
            "lists": [{
                    "title": "万能集市",
                    "pics": [{
                            "link": "",
                            "src": require("../assets/taobaowang/1.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobaowang/2.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobaowang/3.webp")
                        }
                    ]
                },
                {
                    "title": "淘宝江湖",
                    "pics": [{
                            "link": "",
                            "src": require("../assets/taobaowang/4.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobaowang/5.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobaowang/6.webp")
                        }
                    ]
                },
                {
                    "title": "深藏不露",
                    "pics": [{
                            "link": "",
                            "src": require("../assets/taobaowang/7.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobaowang/8.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobaowang/9.webp")
                        }
                    ]
                },
                {
                    "title": "高手林立",
                    "pics": [{
                            "link": "",
                            "src": require("../assets/taobaowang/10.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobaowang/11.webp")
                        },
                        {
                            "link": "",
                            "src": require("../assets/taobaowang/12.webp")
                        }
                    ]
                }
            ]
        },
        "taobaozhibo": {
            "pic": require("../assets/taobaowang/taobaozhibo.png"),
            "title": "淘宝直播",
            "text": "你的爱豆直播等你哟！",
            "lists": [{
                    "title": "aj1黑脚趾",
                    "see": "6193观看",
                    "pics": [{
                            "pic": require("../assets/taobaowang/13.webp"),
                            "link": "",
                            "text": "aj潮鞋半价"
                        },
                        {
                            "pic": require("../assets/taobaowang/14.webp"),
                            "link": "",
                            "text": ""
                        },
                        {
                            "pic": require("../assets/taobaowang/15.webp"),
                            "link": "",
                            "text": ""
                        }
                    ]
                },
                {
                    "title": "泰盛直播",
                    "see": "812观看",
                    "pics": [{
                            "pic": require("../assets/taobaowang/16.webp"),
                            "link": "",
                            "text": "夏秋装新款"
                        },
                        {
                            "pic": require("../assets/taobaowang/17.webp"),
                            "link": "",
                            "text": ""
                        },
                        {
                            "pic": require("../assets/taobaowang/18.webp"),
                            "link": "",
                            "text": ""
                        }
                    ]
                },
                {
                    "title": "品牌折扣",
                    "see": "4300观看",
                    "pics": [{
                            "pic": require("../assets/taobaowang/19.webp"),
                            "link": "",
                            "text": "品牌冬装大件"
                        },
                        {
                            "pic": require("../assets/taobaowang/20.webp"),
                            "link": "",
                            "text": ""
                        },
                        {
                            "pic": require("../assets/taobaowang/21.webp"),
                            "link": "",
                            "text": ""
                        }
                    ]
                },
                {
                    "title": "wujunga",
                    "see": "508观看",
                    "pics": [{
                            "pic": require("../assets/taobaowang/22.webp"),
                            "link": "",
                            "text": "潮鞋品鉴"
                        },
                        {
                            "pic": require("../assets/taobaowang/23.webp"),
                            "link": "",
                            "text": ""
                        },
                        {
                            "pic": require("../assets/taobaowang/24.webp"),
                            "link": "",
                            "text": ""
                        }
                    ]
                }
            ]
        }
    }

    export default {
        name: 'TaoBaoWang',
        data() {
            return {
                res: dataSourse
            }
        }
    }
</script>


<script>
let dataSourse = {
  meirihaodian: {
    pic: require("../assets/taobaowang/meirihaodian.png"),
    title: "每日好店",
    text: "发现深藏的好店",
    lists: [
      {
        title: "万能集市",
        pics: [
          {
            link: "",
            src: require("../assets/taobaowang/1.webp"),
          },
          {
            link: "",
            src: require("../assets/taobaowang/2.webp"),
          },
          {
            link: "",
            src: require("../assets/taobaowang/3.webp"),
          },
        ],
      },
      {
        title: "淘宝江湖",
        pics: [
          {
            link: "",
            src: require("../assets/taobaowang/4.webp"),
          },
          {
            link: "",
            src: require("../assets/taobaowang/5.webp"),
          },
          {
            link: "",
            src: require("../assets/taobaowang/6.webp"),
          },
        ],
      },
      {
        title: "深藏不露",
        pics: [
          {
            link: "",
            src: require("../assets/taobaowang/7.webp"),
          },
          {
            link: "",
            src: require("../assets/taobaowang/8.webp"),
          },
          {
            link: "",
            src: require("../assets/taobaowang/9.webp"),
          },
        ],
      },
      {
        title: "高手林立",
        pics: [
          {
            link: "",
            src: require("../assets/taobaowang/10.webp"),
          },
          {
            link: "",
            src: require("../assets/taobaowang/11.webp"),
          },
          {
            link: "",
            src: require("../assets/taobaowang/12.webp"),
          },
        ],
      },
    ],
  },
  taobaozhibo: {
    pic: require("../assets/taobaowang/taobaozhibo.png"),
    title: "淘宝直播",
    text: "你的爱豆直播等你哟！",
    lists: [
      {
        title: "aj1黑脚趾",
        see: "6193观看",
        pics: [
          {
            pic: require("../assets/taobaowang/13.webp"),
            link: "",
            text: "aj潮鞋半价",
          },
          {
            pic: require("../assets/taobaowang/14.webp"),
            link: "",
            text: "",
          },
          {
            pic: require("../assets/taobaowang/15.webp"),
            link: "",
            text: "",
          },
        ],
      },
      {
        title: "泰盛直播",
        see: "812观看",
        pics: [
          {
            pic: require("../assets/taobaowang/16.webp"),
            link: "",
            text: "夏秋装新款",
          },
          {
            pic: require("../assets/taobaowang/17.webp"),
            link: "",
            text: "",
          },
          {
            pic: require("../assets/taobaowang/18.webp"),
            link: "",
            text: "",
          },
        ],
      },
      {
        title: "品牌折扣",
        see: "4300观看",
        pics: [
          {
            pic: require("../assets/taobaowang/19.webp"),
            link: "",
            text: "品牌冬装大件",
          },
          {
            pic: require("../assets/taobaowang/20.webp"),
            link: "",
            text: "",
          },
          {
            pic: require("../assets/taobaowang/21.webp"),
            link: "",
            text: "",
          },
        ],
      },
      {
        title: "wujunga",
        see: "508观看",
        pics: [
          {
            pic: require("../assets/taobaowang/22.webp"),
            link: "",
            text: "潮鞋品鉴",
          },
          {
            pic: require("../assets/taobaowang/23.webp"),
            link: "",
            text: "",
          },
          {
            pic: require("../assets/taobaowang/24.webp"),
            link: "",
            text: "",
          },
        ],
      },
    ],
  },
};

export default {
  name: "TaoBaoWang",
  data() {
    return {
      res: dataSourse,
    };
  },
};
</script>

<style scoped>
.taobaowang {
  background-color: #f4f4f4;
}

.el-container {
  width: 1200px;
  margin: auto;
}

img {
  width: 100%;
  display: block;
}

h2 {
  margin: 0;
}

h2 img {
  width: auto;
  height: 24px;
  display: inline-block;
}

small {
  font-size: 12px;
  font-weight: 300;
  color: #999;
}

h2 small {
  position: relative;
  top: -7px;
}

h3 {
  font-size: 16px;
  font-weight: 300;
}

.pic {
  height: 180px;
}

.pic2 {
  height: 89px;
}

.pic2-1 {
  margin-bottom: 2px;
}

a {
  display: block;
  position: relative;
}

.box {
  background: #fff;
  padding: 20px;
}

.text {
  position: absolute;
  bottom: 6px;
  left: 16px;
  color: #fff;
}
</style>
